<template>
	<div class="boxonly">
		<el-dropdown>
			    <span class="el-dropdown-link" style="background-color: skyblue;color:white;width: 80px;height: 30px;text-align: center;line-height: 30px;">
			      语言	
			    </span>
			    <template #dropdown>
			      <el-dropdown-menu style="background-color: skyblue;color:white;width: 100px;height: 50px;">
			        <el-dropdown-item @click="changeZh">{{ $t('login.languageZh') }}</el-dropdown-item>
			        <el-dropdown-item @click="changeEn">{{ $t('login.languageEn') }}</el-dropdown-item>
			      </el-dropdown-menu>
			    </template>
			  </el-dropdown>
		<div class="wrap">
			<h3 style="text-align: center;margin-top: 60px;">{{$t('login.title')}}</h3>
			<el-form
				ref="myForm"
				:model="formData"
				:rules="rules"
			>
				<el-form-item :label="$t('login.account')" style="margin-left: 107px;margin-top: 40px;border-radius: 10px;"  prop="userName">
					<el-input :placeholder="$t('login.titleAccount')" v-model="formData.userName" style="width: 30vh;"></el-input>
				</el-form-item>
				<el-form-item :label="$t('login.password')" style="margin-left: 110px;margin-top:40px;margin-bottom: 40px;border-radius: 10px;"  prop="pwd">
					<el-input  :placeholder="$t('login.titlePSW')" v-model="formData.pwd" type="password" style="width: 30vh;"></el-input>
				</el-form-item>
				<el-form-item >
					<el-button type="primary"style="margin: 0 auto;width: 150px;height: 50px;border-radius: 50px;" @click="loginFn(myForm)">{{$t('login.login1')}}</el-button>
				</el-form-item>
			</el-form>
		</div>
	</div>
</template>

<script setup lang="ts">
	import {useRoute,useRouter} from 'vue-router'
	import { reactive, ref, getCurrentInstance, onMounted } from 'vue';
	import type { FormInstance, FormRules,ElDropdown,ElDropdownMenu,ElDropdownItem } from 'element-plus'
	import type {loginResponseType,userFindType,userFindAllType} from "../modal/user";
	import {Login,UserFind,UserFindAll,LoginOut,adduser,updateuser,delateuser} from "@/api/wrd";
	
	
	// import { ElDropdown,ElDropdownMenu,ElDropdownItem } from 'element-plus';
	    // import { reactive, ref, getCurrentInstance, onMounted } from 'vue'
	    console.log(getCurrentInstance)
	
	    //getCurrentInstance函数获取当前组件实例,并通过.appContext.config.globalProperties访问全局属性
	    //?号表示前面如果返回null，后面不执行
	    let $this = getCurrentInstance()?.appContext.config.globalProperties as any
	     console.log($this)
	    //切换中文，存储语言状态
	    const changeZh = () => {
	      $this.$i18n.locale = 'zh'
	      console.log($this.$i18n)
	      localStorage.setItem('lang', 'zh')
	    }
	    //切换英文，存储语言状态
	    const changeEn = () => {
	      $this.$i18n.locale = 'en'
	      localStorage.setItem('lang', 'en')
	    }
		
		
	const router = useRouter()
	const route = useRoute()
	let myForm=ref<FormInstance>();
	let formData=reactive({
		userName:"",
		pwd:"",
	})
	
	const checkUserName=(rule:any,value:any,callback:any)=>{
		let reg=/^[a-z0-9]{3,}$/
		if (value === '') {
		    callback(new Error('用户名不能为空'))
		  } else if (!reg.test(value)) {
		    callback(new Error("用户名只是3以上的数字、字母组成的"))
		  } else {
		    callback()
		  }
	}
	let rules=reactive<FormRules>({
		userName:[
			{
				validator:checkUserName,
				trigger: 'blur'
			}
		],
		pwd:[
			{
				required: true,
				trigger: 'blur',
				message:"密码不能为空"
			}
		],
	})
	
	const loginFn=(formEl:FormInstance)=>{
		formEl.validate(async (valid:boolean,fileds)=>{
			if(valid){
				let res:loginResponseType | undefined=await Login({
					userName:formData.userName,
					pwd:formData.pwd
				})
				console.log(res)
				let rolesIdarr=[]
				let roleId=res?.user.roleId;
				res?.user.roles.forEach(v => {
					rolesIdarr.push(v.roleId)
				});
				sessionStorage.setItem("rolesIdarr",JSON.stringify(rolesIdarr))
				sessionStorage.setItem("userId",res.user.userId)
				sessionStorage.setItem("userName",res.user.userName)
				sessionStorage.setItem("roleId",res.user.roleId)
				sessionStorage.setItem("roleName",res.user.roleName)
				sessionStorage.setItem("password",res.user.pwd)
				sessionStorage.setItem("token",res.token)
				
				// sessionStorage.setItem("userId",res.data.data.user.userId)
				// sessionStorage.setItem("userName",this.username)
				// sessionStorage.setItem("roleId",this.roleIds)
				// sessionStorage.setItem("roleName",res.data.data.user.roleName)
				// sessionStorage.setItem("password",res.data.data.user.pwd)
				// sessionStorage.setItem("token",res.data.data.token)
				
				console.log(roleId)
				// let menuRes:userFindType | undefined=await UserFind({
				// 	pageIndex:"1",
				// 	pageSize:"5",
				// })
				// console.log(menuRes?.list[0].roles[0])
				// if (roleId==1){
				// 	router.push("/homepage")
				// }
				router.push("/homepage")
			}
		})
	}
	
</script>

<style>
	*{
		margin: 0px ;
		padding: 0px; 
	}
	.boxonly{
		/* 		height: 1080px;
				width: 1920px; */
		height:100vh;
		width:100%;
		background-image: url("../assets/image/login.jpg");
		background-size: 100% 100%;
		background-repeat: no-repeat;
		position: relative;
	}
	.wrap{
		/* 		width:671px;
				height:546px; */
		height: 50vh;
		width: 500px;
		position: absolute;
		background-color: #ffffff;
		left: 0;
		right: 0;
		top:0;
		bottom: 0;
		margin: auto;
	}
</style>